<#-- 表单样式宏 -->
<#include "/base/common.ftl"/>
<@bootstrap.head />
<@bootstrap.body>
	<div class="content"> 
			<!-- 计划列表 -->
			<form id="schedule-form" action="<@spring.url "/pmHzbatSchedule/getList" />" method="post">
				<input type="hidden" name ="orderIndex" />
				<input type="hidden" name ="scheduleName" />
				<input type="hidden" name ="scheduleDesc" />
				<input type="hidden" name ="beginDateTime" />
				<input type="hidden" name ="endDateTime" />
				<input type="hidden" name ="progress" />
			</form>
			<table id="schedule" url=""  class="">																	
				<thead>																																									
					<tr role="row">																																					
						<th class="ui-state-default" role="columnheader" colspan="7" style="" >计划列表</th> 										
					</tr> 
					<tr role="row">																																					
						<th class="ui-state-default" role="columnheader"  style="" >顺序索引</th> 										
						<th class="ui-state-default" role="columnheader"  style="" >计划名称</th> 
						<th class="ui-state-default" role="columnheader"  style="" >计划描述</th> 
						<th class="ui-state-default" role="columnheader"  style="" >开始执行日期时间</th> 
						<th class="ui-state-default" role="columnheader"  style="" >结束执行日期间</th> 
						<th class="ui-state-default" role="columnheader"  style="" >进度</th> 
						<th class="ui-state-default" role="columnheader"  style="" >
							<a href="#" onclick="addRow($(this))"><span class="glyphicon glyphicon-plus"></span></a>
						</th> 																				
					</tr>																																											
				</thead>																																								
				<tbody id="schedule-tbody" role="alert" aria-live="polite" aria-relevant="all">																										
				
				</tbody>	
			</table>
			<br>
	</div>

</@bootstrap.body>	
<script>
	  $(document).ready(function(){
			$('.date').datetimepicker({
				language:'zh-CN',
				format:'yyyy-mm-dd hh:ii:ss',
				//minView:"day",
				initialDate:new Date(),
				autoclose:true,
				todayBtn:true
			});	
	  });

      var Tab = {} ;	  
	  //Os Types List Tr
	  Tab.scheduleTr = '<@compress  single_line=true>
		  				<tr>
							<td name="orderIndex">%{orderIndex}</td>
							<td name="scheduleName">%{scheduleName}</td>
							<td name="scheduleDesc">%{scheduleDesc}</td>
							<td name="beginDatetime">%{beginDatetime}</td>
							<td name="endDatetime">%{endDatetime}</td>
							<td name="progress">%{progress}</td>
							<td class="center" name="work-box">
							<a href="#" onclick="editRow($(this))">
								<span class="glyphicon glyphicon-pencil"></span>
							</a>&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="#" onclick="remove($(this))">
								<span class="glyphicon glyphicon-remove"></span>
								<form action="<@spring.url "/pmHzbatSchedule/del" />" method="post">
									<input type="hidden" name="orderIndex"  value="%{orderIndex}" />
									<input type="hidden" name="scheduleName" value="%{scheduleName}" />
								</form>
							</a>	
							</td>
						 </tr>
				 		</@compress>';

	  Tab.scheduleAddTr = '<@compress  single_line=true>
							<tr trType="add">
								<@input name="orderIndex"   class="text64" placeholder="顺序索引" />
								<@input name="scheduleName" class=""       placeholder="计划名称" />
								<@input name="scheduleDesc" class=""       placeholder="计划描述"/>
								<@date2 name="beginDatetime" placeholder="开始执行日期时间"/>
								<@date2 name="endDatetime"   placeholder="结束执行日期间"/>
								<@input name="progress" 	class="" placeholder="进度"/>
								<@toolEdit />
							</tr>
					 		</@compress>';	 
				 		
	  Tab.scheduleEditTr = '<@compress  single_line=true>
							<tr trType="edit">
								<@input name="orderIndex"   class="text64" placeholder="顺序索引" readOnly=true/>
								<@input name="scheduleName" class=""       placeholder="计划名称" readOnly=true />
								<@input name="scheduleDesc" class=""       placeholder="计划描述"/>
								<@date2 name="beginDatetime" placeholder="开始执行日期时间"/>
								<@date2 name="endDatetime"   placeholder="结束执行日期间"/>
								<@input name="progress" 	class="" placeholder="进度"/>
								<@toolEdit />
							</tr>
					 		</@compress>';	
					 			 		
					 					 				
	  query();
	  		
	  //查询			 
	  function query(){
		  	$("#schedule-form").ajaxSubmit(function(text){
		  		if(text.success){
		  			var data = text.data.list;
		  			var html = "" ;
		  			for(var i=0;i<data.length;i++){
		  				html += C._template(Tab.scheduleTr,data[i]);
		  			}
		  			$("#schedule-tbody").html(html);
		  		}
		  	});
	  }			 

	  
	  //删除
	  function remove(_this){
		  var _tr = _this.parent().parent();
		  var trType = _tr.attr("trType");
	  	  if(trType == "add"){   //删除新增行
	  	  	 if(!confirm("新增内容未保存，确认删除？")){return false ;}
	  	  	 _tr.remove();
	  	  }else if(trType == "edit"){  //取消行编辑
	  	  	  if(!confirm("编辑内容未保存，确认取消？")){return false ;}
	  	  	  _editCancel(_tr);
	  	  }else{   //删除数据行
	  	  	  if(!confirm("内容删除后将无法恢复，确认删除？")){return false ;}
	  	  	  var _form = _this.children("form");
		  	  _form.ajaxSubmit(function(text){
		  	  		if(text.success){
		  	  			query();
		  	  			parent.FlushDynamicMenu();  //刷新菜单
		  	  		}
		  	  });
	  	  }
	  }
	  
	  //保存
	  function save(_this){
	      var _tr = _this.parent().parent();
		  var trType = _tr.attr("trType");
		  var $form = $('<form action method="post"></form>');
		  if(trType == "add"){   //新增行
	  	  	 $form.attr("action",'<@spring.url "/pmHzbatSchedule/add" />') ;
	  	  }else if(trType == "edit"){  //行编辑
	  	  	 $form.attr("action",'<@spring.url "/pmHzbatSchedule/update" />') ;
	  	  }
	  	  $form.html(_tr.children().clone(true));  //将当前行内输入框内容插入到form表单中
	  	  $form.ajaxSubmit(function(text){
	  	  	  if(text.success){
	  	  	  	 query();
	  	  	  	 parent.FlushDynamicMenu();  //刷新菜单
	  	  	  }else{
	  	  	  	 C._showErrorMessage(_tr,text.error);
	  	  	  }
	  	  });
	  }
	  
	  //新增行
	  function addRow(_this){
	  	 $("#schedule-tbody").append(Tab.scheduleAddTr);
	  }
	  
	  //编辑行
	  function editRow(_this){
	  	  var _tr = _this.parent().parent();
	  	  var data = _getTrChildrenElementData(_tr,"td");
	  	  //_tr.html($(Tab.scheduleEditTr).html());
	  	  var eidtTr = $(Tab.scheduleEditTr) ;
	  	  _fillTrChildrenInput(eidtTr,data);
	  	  _tr.replaceWith(eidtTr);
	  }
	  
	  //获取tr行内td的值
	  function _getTrChildrenElementData(_tr,element){
	  	 var data = {} ;
	  	 if(_tr == "" || _tr == null ){
	  	 	return data ;
	  	 }
	  	 _tr.find(element).each(function(){
	  	 		var $this = $(this);
	  	 		var name = $this.attr("name");
	  	 		if(name){
	  	 			data[name] = (element != "input" ? $this.text() : $this.val());
	  	 		}
	  	 });
	  	 return data ;
	  }
	  
	  //填充tr行内input元素值
	  function _fillTrChildrenInput(_tr,_data){
	  	 if(_tr == "" || _tr == null ){
	  	 	return false ;
	  	 }
	  	 _tr.find("input").each(function(){
	  	 		var $this = $(this);
	  	 		var name = $this.attr("name");
	  	 		if(name){
	  	 			$this.val(_data[name]);
	  	 		}
	  	 });
	  }
	  
	  
	  //取消当前行编辑
	  function _editCancel(_tr){
	     console.log(_tr.html());
	     var data = _getTrChildrenElementData(_tr,"input")
	  	 console.log(data);
	  	 var tr = C._template(Tab.scheduleTr,data)
	  	 _tr.replaceWith(tr);
	  }
	  
	  
</script>		